/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */
import React, { useEffect, useState, useRef} from 'react'
import axios from 'axios'
import { useHistory, withRouter } from 'react-router-dom'
import { Image, List, InfiniteScroll } from 'antd-mobile'
// import { NavLink } from 'react-router-dom'
export default function Nowplaying(props) {
    const [list, setList] = useState([])
    const [hasMore, setHasMore] = useState(true)
    const pageNum = useRef(0)

    // useEffect(() => {
    //     axios({
    //         url: "https://m.maizuo.com/gateway",
    //         headers: {
    //             'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
    //             'X-Host': 'mall.film-ticket.film.list'
    //         },
    //         params: {
    //             pageNum: 1,
    //             pageSize: 10,
    //             type: 1,
    //             k: 1886067,
    //             cityId: 110100
    //         }
    //     }).then(res => {
    //         console.log(res.data.data.films)
    //         setList(res.data.data.films)
    //     })
    // }, [])
    const loadMore = () => {
        if (hasMore)  pageNum.current++

        // axios({
        //     url: "https://m.maizuo.com/gateway",
        //     headers: {
        //         'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
        //         'X-Host': 'mall.film-ticket.film.list'
        //     },
        //     params: {
        //         pageNum: 1,
        //         pageSize: 10,
        //         type: 1,
        //         k: 1886067,
        //         cityId: 110100
        //     }
        // }).then(res => {
        //     console.log(res.data.data.films)
        //     setlist(res.data.data.films)
        // })
        axios({
            url: "https://m.maizuo.com/gateway",
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.film.list'
            },
            params: {
                pageNum: pageNum.current,
                pageSize: 10,
                type: 1,
                k: 1886067,
                cityId: 110100
            }
        }).then(res => {
            // setList(res.data.data.films)
            setList(val =>

                [...val, ...res.data.data.films]

            )
            setHasMore(res.data.data.films.length > 0)
        })

    }
    const history = useHistory()

    const handleChangePage = ({filmId}) => {

        console.log("click", filmId)

        // window.location.href="#/detail/"+id

        // console.log(props)
        // props.history.push(`/detail/${id}`)
        // this.props.history.push(`/detail/${id}`)

        //1 -动态路由传参
        history.push(`/detail/${filmId}`)

        // 2- query传参
        // history.push({ pathname : '/detail' ,query : { myid: id} })

        // 3- state传参
        // history.push({pathname:"/detail",state:{myid:id}})
    }

    return (
        <div>
            {
                // list.map(item =>
                //     <WithFilmItem key={item.filmId} {...item} />
                // )
                <List >
                    {list.map(user => (
                        <List.Item
                            key={user.filmId}
                            prefix={
                                <Image
                                    src={user.poster}
                                    style={{ borderRadius: 0 }}
                                    // fit='cover'
                                    width={40}
                                    height={80}
                                />
                            }
                            description={user.synopsis.slice(0, 30) + '...'}
                            onClick={()=>{
                                handleChangePage(user)
                            }}
                        >
                            {user.name}
                        </List.Item>
                    ))}
                </List>

            }
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </div>
    )
}

function FilmItem(props) {
    console.log(props)
    let { name, filmId } = props
    return
    // <li onClick={() => {
    //     // console.log(props)
    //     props.history.push(`/detail/${filmId}`)
    // }}>
    //     {/* <NavLink to={'/detail/'+item.filmId}>{item.name}</NavLink> */}

    //     {/* <img src={poster}/> */}
    //     {name}
    // </li>



}


const WithFilmItem = withRouter(FilmItem)